<template>
    <div class="user_login">
        <div class="login_top">
            <div class="img" @click.stop="back">
                <img src="../assets/images/xx.png" alt="" />
            </div>
            密码登录
        </div>
        <div>
            <img src="../assets/images/login-bg.png" alt="" />
        </div>
        <div class="form">
            <input
                type="text"
                :style="{
                    'border-bottom': underlineName ? '2px solid #ebecee' : '2px solid #32AAFD',
                }"
                placeholder="请输入bilibili账号"
                v-model="phone"
                @focus="underlineName = !underlineName"
                @blur="underlineName = !underlineName"
            /><br />
            <input
                type="password"
                :style="{
                    'border-bottom': underlinePass ? '2px solid #ebecee' : '2px solid #32AAFD',
                }"
                placeholder="请输入密码"
                v-model="password"
                @focus="underlinePass = !underlinePass"
                @blur="underlinePass = !underlinePass"
            />
            <span class="pass">忘记密码?</span>
            <div class="agreement">
                <input ref="check" class="checkbox" type="checkbox" />
                <p>我已阅读并同意<span>"服务协议"</span>和<span>"隐私政策"</span></p>
            </div>
            <div class="btns">
                <van-button
                    @click.stop="login"
                    class="btn"
                    :disabled="disabled"
                    round
                    size="large"
                    type="info"
                    >登录</van-button
                ><br />
                <van-button class="btn" round plain size="large" type="info">注册账号</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import router from "@/router";
export default {
    data() {
        return {
            phone: "18279209315",
            password: "123456",
            // phone: "",
            // password: "",
            underlineName: true,
            underlinePass: true,
            disabled: true,
        };
    },
    created() {},

    methods: {
        back() {
            router.back();
        },
        login() {
            if (!this.$refs.check.checked) {
                this.$dialog
                    .confirm({
                        title: "提示",
                        message: "请勾选我已阅读",
                    })
                    .then(() => {
                        this.$refs.check.checked = true;
                    })
                    .catch(() => {
                        this.$refs.check.checked = false;
                    });
                return;
            }

            if (this.phone == "18279209315" && this.password == "123456") {
                this.$dialog
                    .alert({
                        message: "登录成功",
                    })
                    .then(() => {
                        router.back();
                        localStorage.setItem("login", true);
                        this.$store.commit("login", false);
                    });
            } else {
                this.$dialog
                    .alert({
                        title: "提示",
                        message: "账号或密码错误,请重新填写",
                    })
                    .then(() => {
                        this.phone = "";
                        this.password = "";
                    });
            }
        },
    },
    watch: {
        password() {
            if (this.password.length > 5) {
                this.disabled = false;
            } else {
                this.disabled = true;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.user_login {
    position: relative;
    .login_top {
        line-height: 50px;
        text-align: center;
        .img {
            position: absolute;
            top: 0;
            left: 15px;
            width: 15px;
        }
    }
    .form {
        padding: 0px 30px;
        position: relative;
        input {
            width: 100%;
            font-size: 12px;
            outline: none;
            border: none;
            background: none;
            margin-top: 20px;
            padding-bottom: 10px;
        }
        input::-webkit-input-placeholder {
            color: #d4d7d7;
        }
        .pass {
            position: absolute;
            top: 70px;
            right: 25px;
            font-size: 12px;
            color: #999;
        }
        .agreement {
            display: flex;
            align-items: center;
            .checkbox {
                width: 10%;
            }
            p {
                margin-top: 20px;
                span {
                    color: #32aafd;
                }
            }
        }
        .btns {
            .btn {
                margin-top: 20px;
            }
        }
    }
}
</style>
